<template>
  <div v-reize="onReisze">
    <div>
      <attr-select :defaultValue="defaultKey" :dataSource="chartData" v-model="key" :filter="filterFunc" />
    </div>
    <div style="display: flex">
      <div :style="{width: width+'px', height: height+'px'}" ref="chart"></div>
      <div>
        <el-table :data="tableData" height="300" border style="width: 360px">
          <el-table-column prop="label" label="地区" width="140">
          </el-table-column>
          <el-table-column prop="value" label="人数" width="80">
          </el-table-column>
           <el-table-column prop="rr" label="比率" width="80">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { ChartUtils } from "@/utils/chart";
import AttrSelect from "../utils/AttrSelect.vue";
import { isArray, isString } from "@/utils/utils";
import Moment from '@/utils/moment.zh_cn';

const chartUtils = new ChartUtils();

export default {
  components: { AttrSelect },
  data() {
    return {
      key: "性别",
      // step: 1 * 24 * 3600,
      tableData: [],
    };
  },
  props: {
    chartData: Array,
    defaultKey: String,
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 300
    },
  },
  watch: {
    key: function (v, o) {
      this.resetOpt();
    },
    chartData: function (v, o) {
      this.resetOpt();
    },
  },
  methods: {
    async init() {
      chartUtils.dom = this.$refs.chart;
      chartUtils.init();

      let option = this.getOption();
      chartUtils.setOption(option);
    },
    filterFunc(k, v) {
      if (isArray(v)) {
          if (isString(v[0])) {
              return true
          }
      }
      if (isString(v) && !Moment.isDate(v)) {
        return true
      }
      return false;
    },
    getOption() {
      let data = this.reproject();
      let option = {
        title: {
          text: "",
          //   subtext: "纯属虚构",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["发病人数"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: data.map(v => v.label)
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            data: data.map(v => v.value),
            label: {
              show: true,
            },
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            // markLine: {
            //   data: [{ type: "average", name: "平均值" }],
            // },
          },
        ],
      };
      return option;
    },
    reproject() {
      let data = this.chartData.map((v) => v[this.key]);
      let sets = {}
      data.forEach(v => {
          if(isArray(v) && v.length && v.length > 0) {
              v.forEach(vv => {
                  if(isString(vv)) {
                      if(vv in sets) {
                          sets[vv] += 1
                      }
                      else {
                          sets[vv] = 1
                      }
                  }
              })
          }
          else {
            if (v in sets) {
              sets[v] += 1
            }
            else {
              sets[v] = 1
            }
          }
      })
      
      let reproject = [];
      // let tableData = [];
      Object.keys(sets).forEach(k => {
        reproject.push({
          label: k === 'undefined' ? '未填写' : k,
          value: sets[k],
           rr: (sets[k] /  this.chartData.length).toFixed(4)
        })
      })
      this.tableData = reproject;
      return reproject;
    },
    
    resetOpt() {
      let option = this.getOption();
      // console.log(option);
      chartUtils.setOption(option);
    },

    onResize() {
      chartUtils.onResize();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>